<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
                border: 10px solid black;      }

        .div2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 5px solid black;
           overflow: auto;
        }
    </style>
</head>

<body>
    <div class="div1">胡歌
    </div>
    <div class="div2">
        胡歌
        胡歌
        胡歌
        胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌
        胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌
        胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌
        胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌 胡歌
        胡歌
        胡歌
        胡歌
    </div>
    <script>
        // 获取元素位置用offset
        // 获取元素大小有client
        // 获取元素滚动距离用scroll
        // 获取页面滚动距离通过window.pageYoffset
        let div = document.querySelector('.div1')
        console.log('高'+div.clientHeight);//获取自身高度 包括内边距 不包含边框 返回不带单位的数值
        console.log('宽'+div.clientWidth);//获取自身宽度 包括内边距 不包含边框 返回不带单位的数值
        console.log('上边框'+div.clientTop); //获取上边框大小
        console.log('下边款'+div.clientLeft);  // 获取右边框大小


        let div2 = document.querySelector('.div2')
        console.log('不包含边框高:'+div2.scrollHeight); //获取的是高度(如果内容超出就是内容超出的高度) 不包含边框
        console.log('不包含边框宽:'+div2.scrollWidth);//获取的是宽度(如果内容超出就是内容超出的宽度) 不包含边框
        console.log('获取的是从内边框到内容超出的部分:'+div2.scrollTop);  //获取的是从内边框到内容超出的部分
        console.log(div2.scrollLeft);
        div2.addEventListener('scroll',function(){//滚动事件 scroll
            console.log(div2.scrollTop);
        })
    </script>
</body>

</html>